@use "src/styles/variables" as *;

$switch-height: 17px;
$switch-width: $switch-height * 2;
$switch-padding: 3px;
$switch-handle-size: $switch-height - ($switch-padding * 2);
$switch-border-radius: $switch-handle-size + ($switch-padding * 2);

.vm-switch {
  font-size: $font-size-small;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;

  &_full-width {
    justify-content: space-between;
    flex-direction: row-reverse;
  }

  &_full-width &__label {
    margin-left: 0;
  }

  &_disabled {
    opacity: 0.6;
    cursor: default;
  }

  &_secondary_active &-track {
    background-color: $color-secondary;
  }

  &_primary_active &-track {
    background-color: $color-primary;
  }

  &_active &-track {
    &__thumb {
      left: $switch-width - $switch-handle-size - $switch-padding;
    }
  }

  &:hover &-track {
    opacity: 0.8;
  }

  &-track {
    position: relative;
    background-color: rgba($color-black, 0.4);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: $switch-border-radius;
    padding: $switch-padding;
    width: $switch-width;
    height: $switch-height;
    transition: background-color 200ms ease, opacity 300ms ease-out;

    &__thumb {
      position: absolute;
      top: auto;
      left: $switch-padding;
      min-width: $switch-handle-size;
      min-height: $switch-handle-size;
      background-color: $color-background-block;
      border-radius: 50%;
      transition: right 200ms ease-out, left 200ms ease-out;
      transform-style: preserve-3d;
    }
  }

  &__label {
    white-space: nowrap;
    font-size: inherit;
    margin-left: $padding-small;
    transition: color 200ms ease;
    color: $color-text-secondary;
  }

  &_active &__label {
    color: $color-text;
  }
}
